Gradio interface

Creating a simple demo

Through this project, we will create different LLM applications with Gradio interface. Let's get familiar with Gradio by creating a simple app:

Still in the project directory, create a Python file and name it hello.py.

Open hello.py, paste the following Python code and save the file.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  1. import gradio as gr
  2. def greet(name):
  3. return "Hello " + name + "!"
  4. demo = gr.Interface(fn=greet, inputs="text", outputs="text")
  5. demo.launch(server_name="0.0.0.0", server_port= 7860)

The above code creates a gradio.Interface called demo. It wraps the greet function with a simple text-to-text user interface that you could interact with.

The gradio.Interface class is initialized with 3 required parameters:

  • fn: the function to wrap a UI around
  • inputs: which component(s) to use for the input (e.g. “text”, “image” or “audio”)
  • outputs: which component(s) to use for the output (e.g. “text”, “image” or “label”)

The last line demo.launch() launches a server to serve our demo.

Launching the demo app

Now go back to the terminal and make sure that the my_env virtual environment name is displayed at the beginning of the line

Next, run the following command to execute the Python script.

  1. 1
  1. python3 hello.py

As the Python code is served by a local host, click on the button below and you will be able to see the simple application we just created. Feel free to play around with the input and output of the web app!

Click here to see the application:

You should see the following, here we entered the name Bob:

If you finish playing with the app and want to exit, press Ctrl+c in the terminal and close the application tab.

If you wish to learn a little bit more about customization in Gradio, you are invited to take the guided project called Bring your Machine Learning model to life with Gradio. You can find it under Courses & Projects on cognitiveclass.ai!

For the rest of this project, we will use Gradio as an interface for LLM apps.